<template>
  <div class="container">
    <el-card class="box-card">
      <div class="about" style="margin-bottom: 10px">
        <el-alert
          title="说明：目前仅支持学科和关键字条件筛选"
          type="error"
          style="width: 300px"
        >
        </el-alert>
        <el-button
          @click="to"
          style="margin-left: auto"
          icon="el-icon-edit"
          type="success"
          >新增试题</el-button
        >
      </div>
      <el-form ref="form" :model="form" label-width="80px">
        <!-- 第一行 -->
        <!-- 学科 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select
                class="geshi"
                v-model="form.subjectID"
                placeholder="请选择"
                @change="SubjectChange"
              >
                <el-option
                  v-for="(item, index) in subjects"
                  :key="index"
                  :label="item.subjectName"
                  :value="item.id"
                ></el-option>
                <!-- <el-option label="区域二" value="beijing"></el-option> -->
              </el-select>
            </el-form-item>
          </el-col>
          <!-- 目录 -->
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select
                class="geshi"
                v-model="form.catalogID"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in directory"
                  :key="index"
                  :value="item.id"
                  :label="item.directoryName"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 标签 -->
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select class="geshi" v-model="form.tags" placeholder="请选择">
                <el-option
                  v-for="(item, index) in tagList"
                  :key="index"
                  :label="item.tagName"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 关键字 -->
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input class="geshi" v-model="form.keyword"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <!-- 第二行 -->
        <!-- 试题类型 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select
                class="geshi"
                v-model="form.questionType"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in questionType"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 难度 -->
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select
                class="geshi"
                v-model="form.difficulty"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in difficulty"
                  :key="index"
                  :label="item"
                  value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 方向 -->
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select
                class="geshi"
                v-model="form.direction"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in direction"
                  :key="index"
                  :label="item"
                  :value="item"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>

          <!-- 录入人 -->
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select
                class="geshi"
                v-model="form.creatorID"
                placeholder="请选择"
              >
                <el-option
                  v-for="(item, index) in userList"
                  :key="index"
                  :label="item.username"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- 第三行 -->
        <!-- 题目备注 -->
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input class="geshi" v-model="form.remarks"></el-input>
            </el-form-item>
          </el-col>

          <!-- 企业简称 -->
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input class="geshi" v-model="form.shortName"></el-input>
            </el-form-item>
          </el-col>

          <!-- 城市 -->
          <el-col :span="6">
            <el-form-item label="城市">
              <el-row>
                <el-col :span="12"
                  ><el-select
                    v-model="form.province"
                    placeholder="请选择"
                    @change="ProvinceChange"
                  >
                    <el-option
                      v-for="(item, index) in province"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option> </el-select
                ></el-col>
                <el-col :span="12">
                  <el-select v-model="form.city" placeholder="请选择">
                    <el-option
                      v-for="(item, index) in citys"
                      :key="index"
                      :label="item"
                      :value="item"
                    ></el-option>
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
          <div class="about" style="margin-right: 10px">
            <el-button @click="clearForm">清除</el-button
            ><el-button type="primary" @click="getlist">搜索</el-button>
          </div>
        </el-row>
      </el-form>
      <!-- 中间的数据消息 -->
      <el-alert :title="'数据一共' + counts + '条'" type="info"> </el-alert>

      <!-- 表格 -->
      <el-tabs>
        <el-table :data="questionList" style="width: 100%">
          <el-table-column prop="number" header-align="left" label="试题编号" />
          <el-table-column
            prop="subject"
            header-align="left"
            label="学科"
            width="100"
          />
          <el-table-column
            prop="catalog"
            header-align="left"
            label="目录"
            width="120"
          />
          <el-table-column prop="questionType" header-align="left" label="题型">
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.questionType === '1'">单选</span>
                <span v-else-if="scope.row.questionType === '2'">多选</span>
                <span v-else>简答</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="question" header-align="left" label="题干">
            <template slot-scope="scope">
              <div v-html="scope.row.question"></div>
            </template>
          </el-table-column>
          <el-table-column
            prop="addDate"
            header-align="left"
            label="录入时间"
          />
          <el-table-column
            prop="difficulty"
            header-align="left"
            label="难度"
            width="120"
          >
            <template slot-scope="scope">
              <div>
                <span v-if="scope.row.difficulty === '1'">简单</span>
                <span v-else-if="scope.row.difficulty === '2'">一般</span>
                <span v-else>困难</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="creator" header-align="left" label="录入人" />
          <el-table-column label="操作" header-align="left" width="200">
            <template slot-scope="scope">
              <div>
                <!-- 第一个按钮 -->
                <el-button
                  @click="preview(scope.row)"
                  plain
                  size="small"
                  type="primary"
                  icon="el-icon-view"
                  circle
                ></el-button>
                <el-button
                  @click="Edit(scope.row)"
                  plain
                  size="small"
                  type="success"
                  icon="el-icon-edit"
                  circle
                ></el-button>
                <el-button
                  @click="remove(scope.row)"
                  plain
                  size="small"
                  type="danger"
                  icon="el-icon-delete"
                  circle
                ></el-button>
                <el-button
                  @click="choice(scope.row)"
                  plain
                  size="small"
                  type="warning"
                  icon="el-icon-check"
                  circle
                ></el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-row type="flex" justify="end" align="middle" style="height: 50px">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :page-size="form.pagesize"
            :current-page="form.page"
            :page-sizes="[5, 10, 20, 50]"
            layout="prev, pager, next, sizes, jumper"
            background
            :total="counts"
          >
          </el-pagination>
        </el-row>
      </el-tabs>
      <!-- 预览组件 -->
      <questions-preview
        :show-dialog="showDialog"
        @close="fn1"
        :getlistItem="getlistItem"
      />
    </el-card>
  </div>
</template>

<script>
import { list, detail, remove, choiceAdd } from "@/api/hmmm/questions";
import { list as subjectlist } from "@/api/hmmm/subjects";
import { list as directoryslist } from "@/api/hmmm/directorys";
import { list as tagslist } from "@/api/hmmm/tags";
import { list as userlist } from "@/api/base/users";
import questionsPreview from "../components/questions-preview.vue";
import { provinces, citys } from "@/api/hmmm/citys";
export default {
  components: { questionsPreview },
  data() {
    return {
      form: {
        page: 1, //	否	1	当前页数
        pagesize: 5, // 每页显示多少
        subjectID: null, //学科
        difficulty: null, //难度
        questionType: null, // 试题难度
        tags: null, //标签名称
        province: null, //表单显示的省份
        city: null, // 表单显示的城市
        keyword: null, // 关键字
        remarks: null, //	题目备注
        shortName: null, // 企业简称
        direction: null, // 	方向
        creatorID: null, // 录入人
        catalogID: null, // 目录
      },
      // 数据总数
      counts: 0,
      // 标签列表
      tagList: [],
      // 题库列表
      questionList: [],
      //学科列表
      subjects: [],
      // 二级目录列表
      directory: [],
      page1: {
        subjectID: "",
      },
      hhh: "",
      showDialog: false,
      // 难度
      questionType: {
        1: "单选",
        2: "多选",
        3: "简答",
      },
      // 试题类型
      difficulty: {
        1: "简单",
        2: "一般",
        3: "困难",
      },
      // 方向
      direction: [
        "o2o",
        "外包服务",
        "企业服务",
        "互联网金融",
        "企业咨询",
        "互联网",
        "电子商务",
        "其他",
      ],
      // 录入人列表
      userList: [],
      // 直接得到城市列表数据
      province: provinces(),
      // 区域列表
      citys: [],
      // 预览时子组件的试题
      getlistItem: {},
    };
  },
  created() {
    this.getlist();
    this.getsubjectlist();
    this.userlist();
  },
  computed: {},
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    //🍉获取题库列表
    async getlist() {
      // const { pages, items } = await list(this.page);
      // (this.page.total = pages), (this.page.list = items);
      const { data } = await list(this.form);
      // console.log(data);
      this.counts = data.counts;
      this.questionList = data.items;
    },
    //🍉获取学科列表
    async getsubjectlist() {
      try {
        const { data } = await subjectlist({
          page: 1,
          pagesize: 100,
        });
        // console.log(data);
        this.subjects = data.items;
      } catch (error) {
        console.log(error);
      }
    },
    //🍉获取标签列表
    async tagslist() {
      const { data } = await tagslist({
        subjectID: this.form.subjectID,
      });
      this.tagList = data.items;
    },
    // 🍉 目录选择框变化触发的函数
    // DirectoryChange(val) {
    //   this.tagslist();
    // },
    // 🍉 学科选择框变化触发的函数
    async SubjectChange(val) {
      //标签
      this.form.tags = null;
      //目录
      this.form.catalogID = null;
      //🍉获取目录列表
      const { data } = await directoryslist({ subjectID: val });
      // console.log(this.form.subjectID);
      // console.log(data);
      this.directory = data.items;
      //标签列表
      this.tagList = [];
      this.tagslist();
    },
    // 🍉 获取录入人
    async userlist() {
      try {
        //获取用户列表
        const { data } = await userlist({
          page: 1,
          pagesize: 50,
          keyword: "",
        });
        this.userList = data.list;
      } catch (error) {
        console.log(error);
      }
    },
    // 🍉 当市级发生变化时触发的函数
    ProvinceChange(val) {
      this.form.city = "";
      this.citys = citys(val);
      // this.$nextTick(() => {
      //   console.log(this.citys);
      // });
    },
    // 🍉 清除全部
    clearForm() {
      for (let key in this.form) {
        if (key !== "page" && key !== "pagesize") {
          this.form[key] = null;
        }
      }
      // 更新题库列表
      this.getlist();
    },
    // 🍉 预览
    async preview(msg) {
      const { data } = await detail({ id: msg.id });
      console.log(data);
      // console.log(msg);
      data.subject = msg.subject;
      //传入试题
      this.getlistItem = data;
      // console.log(this.getlistItem);
      this.showDialog = true;
    },
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.form.pagesize = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      this.form.page = val;
      this.getlist();
    },
    to() {
      this.$router.push("new");
    },
    fn1(msg) {
      this.showDialog = msg;
    },
    // 🍉 去修改试题的页面
    Edit(msg) {
      this.$router.push({
        path: "new",
        query: {
          id: msg.id,
        },
      });
    },
    // 🍉 删除题库中的题
    remove(msg) {
      // 提示框
      this.$confirm("此操作将永久删除该题目, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success",
        callback: async (action) => {
          if (action === "confirm") {
            try {
              await remove(msg);
              this.getlist();
            } catch (error) {
              console.log(error);
            }
          } else {
            console.log("按下取消");
          }
        },
      });
    },
    // 🍉 加入精选
    choice(msg) {
      // 提示框
      this.$confirm("此操作将该题目加入精选, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "success",
        callback: async (action) => {
          if (action === "confirm") {
            try {
              await choiceAdd({
                id: item.id,
                choiceState: 1,
              });
              this.getlist();
            } catch (error) {
              console.log(error);
            }
          } else {
            console.log("按下取消");
          }
        },
      });
    },
  },
};
</script>

<style scoped >
/* .el-row {
    margin-bottom: 20px;
  } */
.el-row.last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.container {
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 10px;
}
.geshi {
  width: 100%;
}
.about {
  display: flex;
  justify-content: flex-end;
}
</style>
